{{template "header"}}
{{define "testing"}}
<style>
#history tr{
	line-height:25px
}
#history td{
	white-space: nowrap; 
	cursor:pointer;
	padding-left:3px;
}
#history td a{
	color:rgba(172, 197, 181, 0.95);
}
.deltd{
	width:20px;
	color:red;
	padding-left:3px;
	padding-right:3px
}
</style>

<script src="/static/js/jsonformart.js" type="text/javascript"></script>
<div style="width:90%;">
<h3>api接口压力测试测试版</h3>
<br/>
接口:<textarea rows="2" class="form-control" name='url' id="url"></textarea>
<span style="color:#ccc;font-size:12px">例：http://coolaf.com/m?a=xx&b=xx；get参数直接加在url后就行</span>
<br/>
<div  id='disparms'>
post参数:<textarea rows="2" class="form-control" name='parms' id="parms"></textarea>
<span style="color:#ccc;font-size:12px">参数例：a=b&c=d&f=e,只针对post,put</span>
<button type='button' id='highbtn' class="btn btn-success" style="width:20%;height:20px;font-size:10px;padding:0px 0px;float:right;margin-top:3px;margin-right:10px"  >显示高级功能</button>
</div>

<div style='display:none' aid="1" id='highfunc'>
cookie:<textarea rows="3" class="form-control" name='ck' id="ck"></textarea>
<span style="color:#ccc;font-size:12px">cookie的格式：key=value;key2=value2;key3=value3,可以如图所示获取：<a href='http://7oxfxm.com1.z0.glb.clouddn.com/cookie.png' target='_blank'>图示</a></span><br/>
header:<textarea rows="3" class="form-control" name='header' id="header">Content-Type:application/x-www-form-urlencoded</textarea>
<span style="color:#ccc;font-size:12px">header的格式：key:value的格式,一行一条。如图：<a href='http://7oxfxm.com1.z0.glb.clouddn.com/header.png' target='_blank'>图示</a></span><br/>
<!--代理:<input type='input' class="form-control" name='proxy' id="proxy"></input>
<span style="color:#ccc;font-size:12px">代理格式：10.10.10.10:8080,使用代理访问你提交的接口</span><br/>-->
<br/>
</div>
<div>
<select name='seltype' id="seltype"  class="form-control" style='margin-top:10px;float:left;width:49%'>
<option value='get'>GET</option>
<option value='post'>POST</option>
<option value='put'>PUT</option>
</select>
<select name='result' id="result"  class="form-control" style='margin-top:10px;margin-left:10px;float:left;width:49%'>
<option value='1'>结果不输出</option>
<option value='2'>结果随机输出并发的个数</option>
<option value='3'>全部输出-请求数多的情况少用</option>
</select>
<br/>
</div>
<div style='margin-top:50px;line-height:40px;clear:both'>
    <div class="input-group" style='width:49%;float:left'>
      <span class="input-group-addon" id="basic-addon1">请求数</span>
      <input type="text" class="form-control" id ='num' value='100' aria-describedby="basic-addon1">
    </div>
	<div class="input-group" style='width:49%;float:left;margin-left:10px'>
	    <span class="input-group-addon" id="basic-addon1">并发数</span>
	    <input type="text" class="form-control" id ='num_c' value='10' aria-describedby="basic-addon1">
    </div>
</div>

<button type='button' id='btn' onclick='doSend();' style="width:75%;height:40px;margin-top:5px;margin-button:20px"  >发起压力测试</button>
<!--<button type='button' id='clearTesting' style="width:23%;height:40px;margin-top:5px;margin-button:20px"  >取消测试</button>-->
<button type='button' id='clearform' style="width:23%;height:40px;margin-top:5px;margin-button:20px"  >清空表单</button>
</div>
<div style="width:90%;min-height:200px;margin-right:20px;margin-top:20px" >
<ul class="nav nav-tabs" role="tablist" >
  <li role="presentation" class="active" id='rspdis'><a href="javascript:void(0);">压测结果</a></li>
<span id='serverstatus' style='float:right;min-width:200px;border:1px solid #ccc;line-height:30px;text-align:center;margin-left:30px;background-color:#FDF5E6'>与服务器连接状态</span>
</ul>
<pre id="getresult" style='min-height:360px'></pre>
<p id="getresultheader" style='display:none;min-height:360px'></p>

</div>
<div style='margin-left:10px;line-height:30px;font-size:14px'>
<h3>请求参数说明:</h3>
请求数：本次请求要发送的请求的数量<br/>
并发数: 表示多少客户端同时发送请求<br/>
例如：请求数1000，并发数100，相当于100个客户端同时发送请求，每个客户端发送10个请求<br/>

<h3>返回参数说明:</h3>
Time Total:执行的总时间<br/>
Time Fastest：执行最快的一次请求<br/>
Time Slowest：执行最慢的一次请求<br/>
Success Num：成功执行的请求数量（response code 为2xx的请求）<br/>
Fail Num：失败的请求数<br/>
Response Size：响应的大小单位bytes<br/>
Requests per second:平均每秒请求的数量<br/>
temporal distribution：请求的时间分布，每10%中最快请求到最慢请求<br/>
</div>
<script src="/static/js/tool.js"></script>
<script src="/static/js/md5.min.js"></script>
<script language="javascript"type="text/javascript">
var host=window.location.host
var wsUri ="ws://localhost:9090/tool/ajaxinter";
var output;
function init() {
    output = document.getElementById("getresult");
    testWebSocket();
}
function testWebSocket() { 
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) }; }
    function onOpen(evt) {
	 writeToScreen("接入成功！！！");
	$("#btn").removeAttr("disabled"); 
	$("#btn").html("发起压力测试");
	$("#btn").removeAttr("background-color");
	 $("#serverstatus").css("background-color","#00FF00 ");
	 $("#serverstatus").html("与服务器连接成功");
	}
    function onClose(evt) {
        //writeToScreen("DISCONNECTED");
		//websocket.close();
		$("#serverstatus").css("background-color","#FF7F50 ");
		$("#serverstatus").html("与服务器连接失败，请启动服务器");
		window.setTimeout(testWebSocket,1000);
	}
    function onMessage(evt) {
       ns=window.JSON.parse(evt.data);
	   var msg="";
	   if (ns.Type=="S"||ns.Type =="rate") {
		 $("#getresult").html("");
	   }
	   if (ns.Type=="S"||ns.Type =="finish") {
		 $("#btn").removeAttr("disabled"); 
		 $("#btn").html("发起压力测试");
		 $("#btn").removeAttr("background-color")
	   }
	   if (ns.Type =="rate") {
		 msg+="已经完成了："
	   }
	   msg+=ns.Msg;
	   writeToScreen('<span style="">'+msg +'</span>');	
	
       // websocket.close();
	}
    function onError(evt) {
        writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);
	}
    function doSend() {
	    var url=$("#url").val();
		var seltype=$("#seltype").val();
		var num=$("#num").val();
		var num_c=$("#num_c").val();
		var parms=$("#parms").val();
		var result=$("#result").val();
		var ck=$("#ck").val();
		var header=$("#header").val();
		if (url=='') {
			alert("请先填写发送信息");
			$("#message").focus();
			return false;
		}
		if (parseInt(num)<parseInt(num_c)){
			alert("并发数不能小于请求数");
			return false;
		}
		var param = new Object();
		param.url = url;
		param.method = seltype;
		param.param = parms;
		param.ck = ck;
		param.header = header;
		param.C = parseInt(num_c);
		param.N = parseInt(num);
		param.Result = parseInt(result);
		j= JSON.stringify(param);
		//'{"url":"'+url+'"}'
		console.log(j);
		//$("#btn").button( "option", "disabled" );
        $("#btn").attr("disabled","true")
		$("#btn").html("请等待执行完，在进行下次测试")
		$("#btn").attr("background-color","#ccc")
        websocket.send(j);
		}

    function writeToScreen(message) {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
		var d = $("#getresult");
		var d=d[0];
        var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
		$("#getresult").append(pre);
        if (doScroll) {
            d.scrollTop = d.scrollHeight - d.clientHeight;
        }
		}

    window.addEventListener("load", init, false);
    function en(event){
		var evt=evt?evt:(window.event?window.event:null);//兼容IE和FF
        if (evt.keyCode==13){
         doSend()
        }
	}
   $("#clearTesting").click(function(){
	 
   });	

</script> 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?18f18be6e58f13d87192835c8c15fdca";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script language=javascript> 
var historywidth = getCookie("historywidth");
if (parseInt(historywidth)>300){
		$("#di2").width(historywidth+"px");
		$("#historywidth").val(historywidth);
}
function changewidth() {
	var width = $("#historywidth").val();
	if (parseInt(width)<300){
		width=300;
	}
	$("#di2").width(width+"px");
	addCookie("historywidth",width,100000);
}
function geshijson(){
	$html=$("#getresult").html();
	$newjson=jsl.format.formatJson($html);
	$("#getresult").html($newjson.toString());
	alert(decodeURIComponent($newjson.toString()));
}
//获得cookie 的值
 $("#cookie").val(getCookie("urladd"));
 window.setInterval(showalert, 3000); 
  function showalert(){
	var cook=$("#cookie").val();
	addCookie("urladd",cook,100);
   }
//判断是否显示高级功能
$("#highbtn").click(function(){
    $func =$("#highfunc").attr("aid");
    if ($func==1){
		$("#highbtn").html("隐藏高级功能");
		$("#highfunc").show();
		$("#highfunc").attr("aid",2);
		addCookie("func_dis",2,86400*100);
	}
	if ($func==2){
		$("#highbtn").html("显示高级功能");
		$("#highfunc").hide();
		$("#highfunc").attr("aid",1);
		addCookie("func_dis",1,86400*100);
	}
});
</script>
{{end}}
{{template "footer"}}